<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>comboBox</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-05-24 -->
		
		<link href="../../resources/kendo/styles/kendo.default.min.css" rel="stylesheet" />
		 <link href="../../resources/kendo/styles/kendo.common.min.css" rel="stylesheet" />
		 <script src="../../resources/kendo/js/jquery.min.js"></script>
		<script src="../../resources/kendo/js/kendo.all.min.js"></script>
		
		<script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    $("#fabric").kendoComboBox({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
                        filter: "contains",
                        suggest: true,
                        index: 3
                    });

                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();

                    var fabric = $("#fabric").data("kendoComboBox");
					var select = $("#size").data("kendoComboBox");


					$("#get").click(function() {
					    alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value());
                    });
                });
            </script>
		
	</head>
	<body>
		<div id="example" class="k-content" role="application">
		<div id="tshirt-view" class="demo-section">
			<h2>Customize your Kendo T-shirt</h2>
			<h3>T-shirt Fabric</h3>
            <input id="fabric" placeholder="Select fabric..." />

            <h3>T-shirt Size</h3>
            <select id="size" placeholder="Select size...">
				<option>X-Small</option>
				<option>Small</option>
				<option>Medium</option>
				<option>Large</option>
				<option>X-Large</option>
				<option>2X-Large</option>
			</select>
			<br/>
			<button class="k-button" id="get">Customize</button>
        </div>
            
        </div>
	</body>
</html>

